<template>
  <el-dialog title="请选择您要导出的数据类型：" :visible.sync="showDataExportDialog" width="500px"
             @closed="handleClose" :destroy-on-close="true" :lock-scroll="false">

    <div class="el-dialog-div">
      <el-form ref="DataExportForm" :model="DataExportForm" label-width="100px">
        <el-radio-group v-model="exportDataType">
          <el-radio :label="1">图片</el-radio>
          <el-radio :label="2">文档</el-radio>
          <el-radio :label="3">图片和文档</el-radio>
        </el-radio-group>
      </el-form>
    </div >
    <div slot="footer">
      <el-button @click="showDataExportDialog=false">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "DataExport",
  data() {
    return {
      exportDataType: 1,
      DataExportForm: {},  // 表单数据
      editRules: {  // 表单验证规则
      },
      showDataExportDialog: this.showDataExportForm // 子组件不能直接修改父组件prop参数
    };
  },
  props: {
    showDataExportForm: {
      type: Boolean,
      default() {
        return false;
      }
    },
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs['createGradeForm'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({lock: true});
          this.$http.post('/grade/edit', this.createStudentForm).then(res => {
            loading.close();
            if (res.data.code === 200) {
              this.$message({type: 'success', message: res.data.msg});
              this.$emit('reload')
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            loading.close();
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /**
     * 关闭页面
     */
    handleClose(hide) {
      if (hide) {
        hide();
      }
      this.DataExportForm={} // 清空表单数据
      this.$emit('update:showDataExportForm', false)
    },
  },
  watch: {
    showDataExportForm(val) { // 监听该值的变化
      this.showDataExportDialog = val;
    }
  }
};
</script>


<style scoped>

</style>